<template>
  <div>
    <h3>上传头像组件</h3>
    <!-- 
        上传组件内部：
            如果imageUrl存在 则取出回显
            如果imageUrl不存在 则展示+号
        上传组件使用逻辑：
            选择文件上传，如果上传成功，可以用imageUrl接收上传成功的文件路径 回显
            如果上传失败 可以给前端提示
    -->
    <el-upload
      class="avatar-uploader"
      :action="uploadImgUrl"
      :show-file-list="false"
      :headers="{ token: '123456' }"
      name="img"
      :on-success="handleUploadImgSuccess"
      :on-error="handleUploadImgError"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>

    <div>
      <h3>ep的栅格系统：</h3>
      <!-- 
        elementplus 可以通过el-row将一行划分为24个span(单元格)
        再通过el-col 设置它需要占几个span
      -->

      <el-row>
        <el-col :span="2" style="border: 1px solid red">
          <el-button type="info">dianwo !!</el-button>
        </el-col>
        <el-col :span="4" style="border: 1px solid yellow">
          <el-button type="danger">dianwo2 !!</el-button>
        </el-col>
        <el-col :span="6" style="border: 1px solid #888">
          <el-button type="primary">dianwo3 !!</el-button>
        </el-col>
        <el-col :span="12" style="border: 1px solid green">
          <el-button type="primary">dianwo4 !!</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
let imageUrl = ref(null);

let uploadImgUrl = "http://localhost:8080/schedule/upload";
//文件上传成功的回调函数
let handleUploadImgSuccess = (r) => {
  ElMessage.success("上传成功");
  console.log(r.data);
  //接收上传成功的图片地址 回显
  imageUrl.value = r.data;
};
//文件上传失败的回调函数
let handleUploadImgError = (e) => {
  ElMessage.error("网络连接失败");
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 400px;
  height: 400px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 400px;
  height: 400px;
  text-align: center;
}
</style>